<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<title>联系人管理</title>
<link rel="shortcut icon" href="easyui/css/images/favicon.ico" />
<link rel="stylesheet" href="css/flipclock.css">
<link href="css/CalcSS3.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<link href="easyui/css/easyui.css" rel="stylesheet" type="text/css">
<link href="easyui/css/easyui_animation.css" rel="stylesheet"
	type="text/css">
<link href="easyui/css/easyui_plus.css" rel="stylesheet" type="text/css">
<link href="easyui/css/insdep_theme_default.css" rel="stylesheet"
	type="text/css">
<link href="easyui/css/icon.css" rel="stylesheet" type="text/css">
<link href="easyui/css/font-awesome-4.7.0/css/font-awesome.min.css"
	rel="stylesheet" type="text/css">


</head>
<body style="padding: 10px">
	<style>
.by {
	padding: 10px;
	text-align: center;
}
</style>
	<!-- 引入公用表格和表单样式 -->
	<link href="css/utils/utilsDatagrid.css" rel="stylesheet"
		type="text/css">
	<link href="css/utils/utilsForm.css" rel="stylesheet" type="text/css">
	<link href="css/client/client.css" rel="stylesheet" type="text/css">


	<link href="css/client/contact.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="js/client/contact.js"></script>


	<div id="contact-layout" class="easyui-layout"
		style="width: 100%; height: 100%;" data-options="fit:true">
		<div data-options="region:'west'" style="width: 20%;">
			<div class="contact-layout-west">
				<label>百家姓</label>
				<table style="width: 100%" id="contact-first-name"
					class="easyui-datagrid table-chance"
					data-options="striped:true,fitColumns:true,singleSelect:true,border:false,scrollbarSize:0,
					   autoRowHeight:true,nowrap:false,
					   url:'contact-first-name',method:'post'">
					<thead>
						<tr class="datagrid-header-row">
							<th data-options="field:'word',width:10,align:'center'">字母</th>

							<th
								data-options="field:'firstName',width:30,align:'center',formatter:function(value){
								return firstNameButtons(value);
							}">姓式</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>

			</div>
		</div>

		<div data-options="region:'center',border:false" style="padding: 5px;">

			<!-- 本月纪念日 -->
			<div class="contact-curMonth-memerial">
				<label>本月纪念日</label>
				<table id="contact-curMonth-memerial-datagird"
					class="easyui-datagrid table-chance" style="width: 100%"
					data-options="striped:true,fitColumns:true,border:false,url:'query-memorial-curMonth',method:'post',scrollbarSize:0,
					   autoRowHeight:true,nowrap:false">
					<thead>
						<tr class="datagrid-header-row">
							<th
								data-options="field:'contactName',width:20,align:'center',formatter:function(value,row,index){
								return row.contact.contactName;
							}">姓名</th>
							<th data-options="field:'nextMem',width:30,align:'center'">纪念日</th>
							<th
								data-options="field:'type',width:20,align:'center',formatter:function(value,row,index){
								return row.memorial.type;
							}">类型</th>
							<th
								data-options="field:'phone',width:30,align:'center',formatter:function(value,row,index){
								return row.contact.phone;
							}">相关信息</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>

			</div>

			<!-- 下月纪念日 -->
			<div class="contact-nextMonth-memerial">
				<label>下月纪念日</label>
				<table id="contact-nextMonth-memerial-datagrid"
					class="easyui-datagrid table-chance" style="width: 100%"
					data-options="striped:true,fitColumns:true,border:false,url:'query-memorial-nextMonth',method:'post',scrollbarSize:0,
					   autoRowHeight:true,nowrap:false">
					<thead>
						<tr class="datagrid-header-row">
							<th
								data-options="field:'contactName',width:20,align:'center',formatter:function(value,row,index){
								return row.contact.contactName;
							}">姓名</th>
							<th data-options="field:'nextMem',width:30,align:'center'">纪念日</th>
							<th
								data-options="field:'type',width:20,align:'center',formatter:function(value,row,index){
								return row.memorial.type;
							}">类型</th>
							<th
								data-options="field:'phone',width:30,align:'center',formatter:function(value,row,index){
								return row.contact.phone;
							}">相关信息</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>

			<!-- 头部搜索框 -->
			<div class="client-searchbox-div">
				<input id="contact-searchbox" class="easyui-searchbox"
					style="width: 300px;"
					data-options="menu:'#contact-searchbox-checkbox',labelWidth:80"></input>

				<div id="contact-searchbox-checkbox" style="width: 120px"
					data-options="left:5">
					<div data-options="name:'contactName',selected:true">联系人名称</div>
					<div data-options="name:'contactid'">联系人编号</div>
				</div>

				<a id="contact-search-btn" class="easyui-linkbutton"
					data-options="text:'高级查询'"
					style="margin-left: 10px; padding: 5px 10px;"></a>
			</div>

			<!-- 高级查询框 -->
			<div class="client-advance-search">
				<form id="contact-advance-search-form" method="post" action="">
					<table>
						<tr>
							<td style="width: 20%; text-align: right;"><label>高级查询</label></td>
							<td style="width: 40%"><a id="contact-advance-search-btn"
								href="#" class="easyui-linkbutton"
								data-options="iconCls:'icon-back',text:'返回快速查询'"></a></td>
							<td style="width: 40%">
						</tr>

						<!-- <tr>
							<td style="width: 20%; text-align: right;"><label>ID：</label></td>
							<td style="width: 40%"><input name="contactid"
								class="easyui-textbox" style="width: 100%"></td>
							<td style="width: 40%"></td>
						</tr> -->

						<tr>
							<td style="width: 20%; text-align: right;"><label>对应客户：</label></td>
							<td style="width: 40%"><input class="easyui-combobox"
								name="cid" style="width: 100%"
								data-options="
       								valueField:'cid',textField:'cname',url:'find-all-client', limitToList:true" />
							</td>
							<td style="width: 40%"></td>
						</tr>

						<tr>
							<td style="width: 20%; text-align: right;"><label>姓名：</label></td>
							<td style="width: 40%"><input name="contactName"
								class="easyui-textbox" style="width: 100%"></td>
							<td style="width: 40%"></td>
						</tr>

						<tr>
							<td style="width: 20%; text-align: right;"><label>性别：</label></td>
							<td style="width: 40%"><input type="radio" name="sex"
								value="男"><label>男</label> <input type="radio"
								name="sex" value="女"><label>女</label></td>
							<td style="width: 40%"></td>
						</tr>

						<tr>
							<td style="width: 20%; text-align: right;"><label>职务：</label></td>
							<td style="width: 40%"><input name="job"
								class="easyui-textbox" style="width: 100%"></td>
							<td style="width: 40%"></td>
						</tr>

						<tr>
							<td style="width: 20%; text-align: right;"><label>部门：</label></td>
							<td style="width: 40%"><input name="dept"
								class="easyui-textbox" style="width: 100%"></td>
							<td style="width: 40%"></td>
						</tr>

						<tr>
							<td style="width: 20%; text-align: right;"><label>负责业务：</label></td>
							<td style="width: 40%"><input name="transcation"
								class="easyui-textbox" style="width: 100%"></td>
							<td style="width: 40%"></td>
						</tr>

						<tr>
							<td style="width: 20%; text-align: right;"><label>类型：</label></td>
							<td style="width: 40%"><input type="radio" name="type"
								value="联系人"><label>联系人</label> <input type="radio"
								name="type" value="主联系人"><label>主联系人</label></td>
							<td style="width: 40%"></td>
						</tr>

						<tr>
							<td style="width: 20%; text-align: right;"><label>工作电话：</label></td>
							<td style="width: 40%"><input name="phone"
								class="easyui-textbox" style="width: 100%"></td>
							<td style="width: 40%"></td>
						</tr>

						<tr>
							<td style="width: 20%; text-align: right;"><label>传真：</label></td>
							<td style="width: 40%"><input name="fex"
								class="easyui-textbox" style="width: 100%"></td>
							<td style="width: 40%"></td>
						</tr>

						<tr>
							<td style="width: 20%; text-align: right;"><label>邮件地址：</label></td>
							<td style="width: 40%"><input name="email"
								class="easyui-textbox" style="width: 100%"></td>
							<td style="width: 40%"></td>
						</tr>

						<tr>
							<td style="width: 20%; text-align: right;"><label>QQ：</label></td>
							<td style="width: 40%"><input name="qq"
								class="easyui-textbox" style="width: 100%"></td>
							<td style="width: 40%"></td>
						</tr>

						<tr>
							<td style="width: 20%; text-align: right;"><label>家庭电话：</label></td>
							<td style="width: 40%"><input name="homePhone"
								class="easyui-textbox" style="width: 100%"></td>
							<td style="width: 40%"></td>
						</tr>

						<tr>
							<td style="width: 20%; text-align: right;"><label>家庭住址：</label></td>
							<td style="width: 40%"><input name="address"
								class="easyui-textbox" style="width: 100%"></td>
							<td style="width: 40%"></td>
						</tr>

						<tr>
							<td style="width: 20%; text-align: right;"><label>联系人分类：</label></td>
							<td style="width: 40%"><input type="radio" name="important"
								value="0"><label>特别重要</label> <input type="radio"
								name="important" value="1"><label>重要</label> <input
								type="radio" name="important" value="2"><label>普通</label>
								<input type="radio" name="important" value="3"><label>不重要</label>
								<input type="radio" name="important" value="4"><label>失效</label>
							</td>
							<td style="width: 40%"></td>
						</tr>

						<tr>
							<td style="width: 20%; text-align: right;"><label>证件类型：</label></td>
							<td style="width: 40%"><input type="radio" name="cardType"
								value="身份证"><label>身份证</label> <input type="radio"
								name="cardType" value="军官证"><label>军官证</label> <input
								type="radio" name="cardType" value="护照"><label>护照</label>
								<input type="radio" name="cardType" value="其他"><label>其他</label>
							</td>
							<td style="width: 40%"></td>
						</tr>

						<tr>
							<td style="width: 20%; text-align: right;"><label>证件号码：</label></td>
							<td style="width: 40%"><input name="cardNumber"
								class="easyui-textbox" style="width: 100%"></td>
							<td style="width: 40%"></td>
						</tr>

						<tr>
							<td style="width: 20%; text-align: right;"><label>微信：</label></td>
							<td style="width: 40%"><input name="wechat"
								class="easyui-textbox" style="width: 100%"></td>
							<td style="width: 40%"></td>
						</tr>

						<tr>
							<td style="width: 20%; text-align: right;"><label>备注：</label></td>
							<td style="width: 40%"><input name="remarks"
								class="easyui-textbox" style="width: 100%"></td>
							<td style="width: 40%"></td>
						</tr>

						<tr>
							<td style="width: 20%; text-align: right;"></td>
							<td style="width: 40%; text-align: center;"><a
								id="contact-advance-btn" class="easyui-linkbutton"
								data-options="text:'查询',width:50"></a></td>
							<td style="width: 40%"></td>
						</tr>

					</table>
				</form>
			</div>

			<!-- 数据列表 -->
			<div>
				<table id="jm-contact-datagrid" class="easyui-datagrid table-chance"
					style="width: 100%"
					data-options="striped:true,height:350,fitColumns:true,border:false,scrollbarSize:0,
					   autoRowHeight:true,nowrap:false,pagination:true,toolbar:'#jm-contact-datagrid-tools',url:'find-all-contacts',method:'post',
					pageList:[5,10,15,20],pageSize:5">
					<thead>
						<tr class="datagrid-header-row">
							<th
								data-options="field:'code',width:10,align:'center',checkbox:true">编码</th>
							<th data-options="field:'contactid',width:10,align:'center'">ID</th>
							<th data-options="field:'contactName',width:20,align:'center'">姓名</th>
							<th data-options="field:'sex',width:20,align:'center'">男</th>
							<th data-options="field:'phone',width:30,align:'center'">移动电话</th>
							<th data-options="field:'email',width:30,align:'center'">邮件地址</th>
							<th
								data-options="field:'clientInfo',width:30,align:'center',formatter:function(value){
									if(value != null) return value.cname;
								}">对应客户</th>

							<th
								data-options="field:'important',width:30,align:'center',formatter:function(value){
								if(value==0){
									return '特别重要';
								}else if(value==1){
									return '重要';
								}else if(value==2){
									return '普通';
								}else if(value==3){
									return '不重要';
								}else if(value==4){
									return '失效';
								}
							}">联系人分类</th>
							<th data-options="field:'type',width:40,align:'center'"
								formatter="format">操作</th>

						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>

				<!--datagrid工具栏-->
				<div id="jm-contact-datagrid-tools">
					<a id="contact-tools-btn-add" class="easyui-linkbutton"
						data-options="iconCls:'icon-mini_add2',plain:true">新建</a> <a
						id="contact-tools-btn-remove" href="#" class="easyui-linkbutton"
						data-options="iconCls:'icon-my_delete',plain:true">删除</a> <a
						id="contact-tools-btn-selectAll" class="easyui-linkbutton"
						data-options="iconCls:'icon-my_search',plain:true">查询所有</a>
				</div>

				<!-- 新建联系人对话框 -->
				<div id="add-contact-dialog" class="easyui-dialog"
					style="background-color: #EBEFF2;"
					data-options="title:'新建联系人',
						iconCls:'icon-save2',
						width:750,
						height:700,
						closed:true,
						href:'to-add-contact',
						bodyCls:'by',
						shadow:true,
						buttons:[{
							text:'保存',
							iconCls:'icon-ok2',
							handler:function(){
								//提交表单事件
								$('#add-contact-form').form({
									onSubmit:function(parmps){
										//进行验证
										return $(this).form('validate');
									},
									success:function(r){
										r = eval('('+r+')');
										if(r.success){
											//点击关闭，则窗口关闭
											$.messager.alert('成功', '恭喜，成功添加联系人！');
											$('#add-contact-dialog').window('close');
											$('#add-contact-form').form('clear');
		            						$('#jm-contact-datagrid').datagrid('reload');
		            						$('#contact-first-name').datagrid('reload');
										}else{
											$.messager.alert('错误', r.message);
										}
									}
								}).submit();
							}
       					
						},
						{
							text:'关闭',
							iconCls:'icon-cancel2',
							handler:function(){
								//点击关闭，则窗口关闭
								$('#add-contact-dialog').window('close');
							}
						}
						]
						 "></div>

				<!-- 编辑联系人对话框 -->
				<div id="edit-contact-dialog" class="easyui-dialog"
					style="background-color: #EBEFF2;"
					data-options="title:'编辑联系人',
						iconCls:'icon-save2',
						width:750,
						height:700,
						closed:true,
						href:'to-edit-contact',
						bodyCls:'by',
						shadow:true,
						buttons:[{
							text:'保存',
							iconCls:'icon-ok2',
							handler:function(){
								//提交表单事件
								$('#edit-contact-form').form({
									onSubmit:function(parmps){
										//进行验证
										return $(this).form('validate');
									},
									success:function(r){
										r = eval('('+r+')');
										if(r.success){
											//点击关闭，则窗口关闭
											$.messager.alert('成功', '恭喜，修改联系人成功！');
											$('#edit-contact-dialog').window('close');
											$('#edit-contact-form').form('clear');
		            						$('#jm-contact-datagrid').datagrid('reload');
		            						$('#contact-first-name').datagrid('reload');
		            						$('#contact-curMonth-memerial-datagird').datagrid('reload');
		            						$('#contact-nextMonth-memerial-datagrid').datagrid('reload');
										}else{
											$.messager.alert('错误', r.message);
										}
									}
								}).submit();
							}
       					
						},
						{
							text:'关闭',
							iconCls:'icon-cancel2',
							handler:function(){
								//点击关闭，则窗口关闭
								$('#edit-contact-dialog').window('close');
							}
						}
						]
						 "></div>
				<!-- 联系人视图对话框 -->
				<div id="view-contact-dialog" class="easyui-dialog"
					style="background-color: #EBEFF2;"
					data-options="title:'联系人信息',
								iconCls:'icon-save2',
								width:750,
								height:700,
								closed:true,
								href:'to-view-contact',
								bodyCls:'by',
								shadow:true
								 "></div>


			</div>

		</div>
	</div>

</body>
</html>
